<template>
    <div class="app-container">
        <div class="page-header">
            <el-button style="margin-right: 20px;" type="primary" @click="$router.push('/main/renshi/renshizhidu/nblianluoh/nblianluoh')"
                icon="el-icon-back">返回</el-button>
            <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/nblianluoh/nblianluoh">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link> -->
            <h2>内部联络函列表</h2>
        </div>
        <div class="filter-container">
            <el-input v-model="listQuery.docNumber" placeholder="编号" style="width: 196px;" class="filter-item" />
            <el-input v-model="listQuery.recipientUnit" placeholder="收件人单位" style="width: 196px;" class="filter-item" />
            <el-input v-model="listQuery.recipient" placeholder="收件人" style="width: 196px;" class="filter-item" />
            <el-input v-model="listQuery.subject" placeholder="主题" style="width: 196px;" class="filter-item" />
            <el-input v-model="listQuery.issuingDepartment" placeholder="发出部门" style="width: 196px;"
                class="filter-item" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                新增
            </el-button>
        </div>

        <div style="padding-bottom: 20px;">
            <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
                <el-table-column label="编号" prop="docNumber" align="center" />
                <el-table-column label="收件人单位" prop="recipientUnit" align="center" />
                <el-table-column label="收件人" prop="recipient" align="center" />
                <el-table-column label="主题" prop="subject" align="center" />
                <el-table-column label="发出部门" prop="issuingDepartment" align="center" />
                <el-table-column label="要求回复" prop="requireReply" align="center" width="100" />
                <el-table-column label="操作" align="center" width="230">
                    <template slot-scope="{row}">
                        <el-button type="primary" size="mini" @click="handleView(row)">
                            查看
                        </el-button>
                        <el-button type="success" size="mini" @click="handleEdit(row)">
                            编辑
                        </el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
            @pagination="getList" />
    </div>
</template>

<script>
import { getInternalCommunicationList, deleteInternalCommunication } from '@/api/internalCommunication'
import Pagination from '@/components/Pagination'

export default {
    name: 'InternalCommunicationList',
    components: { Pagination },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                current: 1,
                size: 10,
                docNumber: undefined,
                recipientUnit: undefined,
                recipient: undefined,
                subject: undefined,
                issuingDepartment: undefined
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            try {
                this.listLoading = true
                const response = await getInternalCommunicationList(this.listQuery)
                if (response.data && response.data.code === 200) {
                    const { records, total } = response.data.data
                    this.list = records
                    this.total = total
                }
            } catch (error) {
                console.error('获取列表失败：', error)
            } finally {
                this.listLoading = false
            }
        },
        handleFilter() {
            this.listQuery.current = 1
            this.getList()
        },
        handleCreate() {
            this.$router.push('/main/renshi/renshizhidu/nblianluoh/nblianluoh')
        },
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/nblianluoh/nblianluoh',
                query: { id: row.id, type: 'view' }
            })
        },
        handleEdit(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/nblianluoh/nblianluoh',
                query: { id: row.id, type: 'edit' }
            })
        },
        async handleDelete(row) {
            try {
                await this.$confirm('确认删除该记录?', '提示', {
                    type: 'warning'
                })
                const response = await deleteInternalCommunication(row.id)
                if (response.data && response.data.code === 200) {
                    this.$message.success('删除成功')
                    this.getList()
                } else {
                    this.$message.error(response.data.message || '删除失败')
                }
            } catch (error) {
                console.error('删除失败：', error)
            }
        }
    }
}
</script>

<style scoped>
/* 容器样式 */
.app-container {
    padding: 20px;
    /* background-color: #f5f7fa; */
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    min-height: calc(100vh - 40px);
    width: 1200px;
    margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409EFF;
    font-size: 16px;
    margin-right: 20px;
    transition: all 0.3s;
}

.back-link i {
    margin-right: 5px;
}

.back-link:hover {
    opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #303133;
}

.filter-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.filter-item {
    margin-right: 10px;
}

/* 按钮样式 */
.el-button {
    border-radius: 4px;
    padding: 8px 13px;
    font-family: '宋体';
    font-size: 1em;
}
</style>